<template>
  <div class="content">
    <div class="mask"></div>
    <div class="addPersonInfo">
      <table>
        <thead>
          <tr>
            <th>信息</th>
            <th>内容</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>姓名</td>
            <td>
              <input type="text" v-model="name" />
              <p v-show="isShowtip">请输入"姓名"字段！</p>
            </td>
          </tr>
          <tr>
            <td>性别</td>
            <td>
              <input type="radio" value="男" name="gender" v-model="gender" />男
              <input type="radio" value="女" name="gender" v-model="gender" />女
              <input
                type="radio"
                value="保密"
                name="gender"
                v-model="gender"
              />保密
            </td>
          </tr>
          <tr>
            <td>省份</td>
            <td>
              <select v-model="province">
                <option value="北京市">北京市</option>
                <option value="四川省">四川省</option>
                <option value="上海市">上海市</option>
                <option value="广州市">广州市</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="buttons">
              <button @click="confirmAdd">确定增加</button>
              <button @click="changeIsShowModel(false)">取消</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      name: "",
      gender: "男",
      province: "北京市",
      isShowtip: false,
      id: 0,
    };
  },
  computed: {
    ...mapState({
      arr: (state) => state.personInfo.arr,
    }),
  },
  created() {
    this.id = this.arr.length;
  },
  methods: {
    ...mapMutations({
      changeIsShowModel: "showModel/changeIsShowModel",
      addPersonInfo: "personInfo/addPersonInfo",
    }),

    confirmAdd() {
      if (this.name == "") {
        this.isShowtip = true;
      } else {
        this.addPersonInfo({
          id: ++this.id,
          name: this.name,
          gender: this.gender,
          prov: this.province,
        });
        this.name = "";
        this.gender = "男";
        this.province = "北京市";
        this.changeIsShowModel(false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
  }
  .addPersonInfo {
    width: 300px;
    height: 230px;
    position: absolute;
    background: #fff;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    table {
      width: 100%;
      height: 100%;
      background: #fff;
      th {
        height: 40px;
        line-height: 40px;
        border: 1px solid #000;
        font-weight: 600;
      }
      tbody {
        td {
          text-align: center;
          vertical-align: middle;
          border: 1px solid #000;
          p {
            line-height: 0;
            margin: 10px 0 0 10px;
            color: red;
            font-size: 12px;
          }
          &:not(:first-child) {
            text-align: left;
            input {
              margin-left: 10px;
            }
            select {
              margin-left: 10px;
            }
          }
        }
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>